<script setup lang="ts">
// const props = defineProps<{
//   modelValue?: boolean,
// }>()
import { computed, onMounted, ref } from 'vue';

import { ReloadOutlined } from '@ant-design/icons-vue';

import { getFreightIdList } from '#/api';
import { auto1688stor } from '#/store';

const formState: any = defineModel();
const afterSaleRule = computed(() => formState.value.rule?.afterSaleRule);
const selectLabel = {
  label: 'name',
  value: 'value',
};
const auto1688storTres = auto1688stor();
const nowData = computed(() => auto1688storTres.auto1688.nowSelectDyShop);

const loadingGetling = ref(false);
const dynalightIdList = ref([]);
onMounted(() => {
  getFreight();
});
// 获取运费模版
function getFreight() {
  loadingGetling.value = true;

  if (!nowData.value) return;
  getFreightIdList({ shopId: nowData.value.shopId }).then((res) => {
    loadingGetling.value = false;
    dynalightIdList.value = res.list.map((item: any) => item.template);
  });
}
function jumpAddYunfei() {
  open('https://fxg.jinritemai.com/ffa/morder/logistics/freight-list');
}
</script>

<template>
  <div v-if="afterSaleRule">
    <a-form layout="vertical">
      <a-form-item
        :rules="[
          {
            required: true,
            message: `该项为必填，请输入`,
          },
        ]"
        label="运费模版"
      >
        <a-select
          v-model:value="formState.freightId"
          :field-names="{
            label: 'templateName',
            value: 'id',
          }"
          :loading="loadingGetling"
          :options="dynalightIdList"
          placeholder="请选择运费模版"
          style="width: 400px"
        />
        <ReloadOutlined
          :class="loadingGetling && 'animate-spin'"
          class="ml-4 cursor-pointer"
          @click="getFreight"
        />
        <a-button class="ml-4" type="primary" @click="jumpAddYunfei">
          新建运费模版
        </a-button>
      </a-form-item>

      <a-form-item
        :rules="[
          {
            required: true,
            message: `该项为必填，请输入`,
          },
        ]"
        label="商品状态"
      >
        <a-radio-group>
          <a-radio value="onsale">上架</a-radio>
          <a-radio value="instock">下架</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        v-if="
          afterSaleRule.threeGuarantees.enable === true ||
          afterSaleRule.threeGuarantees.enable === 'true'
        "
        :rules="[
          {
            required:
              afterSaleRule.threeGuarantees.mustSelect === true ||
              afterSaleRule.threeGuarantees.mustSelect === 'true',
            message: `该项为必填，请输入`,
          },
        ]"
        label="三包服务承诺"
      >
        <a-select
          :field-names="selectLabel"
          :options="afterSaleRule.threeGuarantees.options"
          placeholder="请选择三包服务承诺"
          style="width: 400px"
        />
      </a-form-item>
      <a-form-item
        v-if="
          afterSaleRule.allergyReturnV2Rule.enable === true ||
          afterSaleRule.allergyReturnV2Rule.enable === 'true'
        "
        :rules="[
          {
            required:
              afterSaleRule.allergyReturnV2Rule.mustSelect === true ||
              afterSaleRule.allergyReturnV2Rule.mustSelect === 'true',
            message: `该项为必填，请输入`,
          },
        ]"
        label="过敏包退"
      >
        <a-select
          :field-names="selectLabel"
          :options="afterSaleRule.allergyReturnV2Rule.options"
          placeholder="请选择过敏包退承诺"
          style="width: 400px"
        />
      </a-form-item>
      <a-form-item
        v-if="
          afterSaleRule.largeProductRule.enable === true ||
          afterSaleRule.largeProductRule.enable === 'true'
        "
        :rules="[
          {
            required:
              afterSaleRule.largeProductRule.mustSelect === true ||
              afterSaleRule.largeProductRule.mustSelect === 'true',
            message: `该项为必填，请输入`,
          },
        ]"
        label="大件商品售后承诺"
      >
        <a-select
          :field-names="selectLabel"
          :options="afterSaleRule.largeProductRule.options"
          placeholder="请选择大件商品售后承诺"
          style="width: 400px"
        />
      </a-form-item>
      <a-form-item
        v-if="
          afterSaleRule.supplyDayReturnRule.enable === true ||
          afterSaleRule.supplyDayReturnRule.enable === 'true'
        "
        :rules="[{ required: true, message: `该项为必填，请输入` }]"
        label="无理由退货"
      >
        <a-select
          :field-names="selectLabel"
          :options="afterSaleRule.supplyDayReturnRule.options"
          placeholder="请选择无理由退货"
          style="width: 400px"
        />
      </a-form-item>

      <a-form-item label="限购">
        <div class="flex w-full">
          <div class="mr-4 w-1/2">
            <div>每个订单最多购买</div>
            <a-input placeholder="请输入" suffix="件" />
          </div>
          <div class="w-1/2">
            <div>每个用户累计可购买</div>
            <a-input placeholder="请输入" suffix="件" />
          </div>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>
